<template>
  <div class="member-center">
    <!-- 个人头部信息 -->
    <div class="member-header">
      <div class="header-bg">
        <img src="https://youimg1.c-ctrip.com/target/01024120006426ut7DF55_W_10000_1200.jpg?proc=autoorient" alt="泉州古城背景">
      </div>
      
      <div class="member-profile">
        <div class="avatar-box">
          <img :src="user.avatar" alt="用户头像" class="avatar">
        </div>
        
        <div class="profile-info">
          <h2>{{ user.nickname }}</h2>
          <p class="member-id">用户ID：{{ user.memberId }}</p>
          <div class="collection-info">
            <div class="collection-count">{{ user.collectionCount }} <span>收藏</span></div>
            <p class="collection-desc">您已收藏了{{ user.collectionCount }}个景点/活动</p>
          </div>
        </div>
      </div>
    </div>

    <!-- 功能模块 -->
    <div class="function-modules">
      <div 
        v-for="(module, index) in modules" 
        :key="index" 
        class="module-card"
        @click="handleModuleClick(module)"
      >
        <div class="module-icon">
          <img :src="module.icon" alt="模块图标">
        </div>
        <h3>{{ module.title }}</h3>
        <p>{{ module.desc }}</p>
      </div>
    </div>

    <!-- 我的收藏 -->
    <div class="my-collections">
      <h2>我的收藏</h2>
      <div class="collection-list">
        <div class="collection-item" v-for="(item, index) in collections" :key="index">
          <div class="collection-image">
            <img :src="item.image" :alt="item.name">
          </div>
          <div class="collection-info">
            <h3>{{ item.name }}</h3>
            <p>{{ item.desc }}</p>
            <div class="collection-tags">
              <span class="tag">{{ item.type }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 最近收藏 -->
    <div class="recent-collections">
      <h2>最近收藏</h2>
      <ul class="record-list">
        <li v-for="(record, index) in recentCollections" :key="index" class="record-item">
          <div class="record-date">{{ record.date }}</div>
          <div class="record-content">
            <span class="type-icon collection"></span>
            <span>{{ record.name }}</span>
            <span class="location">{{ record.location }}</span>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';

// 用户数据
const user = ref({
  avatar: 'https://miaobi-lite.bj.bcebos.com/miaobi/5mao/b%276Jyh56yU5bCP5paw5oOF5L6j5aS05YOPXzE3Mjg5NDgyODguMjQ1MjcyMg%3D%3D%27/0.png', // 用户头像
  nickname: '闽南小游客', // 默认昵称
  memberId: 'QZ-20240523-10086',
  collectionCount: 12 // 收藏数量
});

// 功能模块
const modules = ref([
  {
    title: '我的订单',
    desc: '查看门票/活动预约记录',
    icon: 'https://img.icons8.com/ios-filled/50/000000/purchase-order.png' // 订单图标
  },
  {
    title: '我的收藏',
    desc: '查看已收藏的景点和活动',
    icon: 'https://img.icons8.com/ios-filled/50/000000/like--v1.png' // 收藏图标
  },
  {
    title: '行程规划',
    desc: '个性化旅游路线推荐',
    icon: 'https://img.icons8.com/ios-filled/50/000000/route.png' // 行程规划图标
  },
  {
    title: '设置',
    desc: '修改个人信息/通知设置',
    icon: 'https://img.icons8.com/ios-filled/50/000000/settings.png' // 设置图标
  }
]);

// 收藏列表
const collections = ref([
  {
    name: '清源山',
    desc: '泉州著名风景区，融合了自然风光与人文景观',
    image: 'https://ts1.tc.mm.bing.net/th/id/R-C.7fb00b67fc5b10c0763461c403af01be?rik=upyegH5cX%2bYujg&riu=http%3a%2f%2fwww.ctnews.com.cn%2ffj%2fpic%2f2023-02%2f24%2f137579_12a1bead-24c9-440a-a67a-3f4b6bfe154f.jpg&ehk=I0HmhQOLT9yA0Xan6BvOpHZjQLBHLhdgQbdr50Eo4dk%3d&risl=&pid=ImgRaw&r=0', // 使用首页清源山图片
    type: '景点'
  },
  {
    name: '开元寺',
    desc: '中国东南沿海著名的佛教古刹，始建于唐代',
    image: 'https://tse3-mm.cn.bing.net/th/id/OIP-C.ekbXLCeZryIcivDpWr5tbAHaLF?cb=iwp2&rs=1&pid=ImgDetMain', // 使用首页开元寺图片
    type: '古迹'
  },
  {
    name: '南音演奏会',
    desc: '泉州传统音乐表演，被列入非物质文化遗产',
    image: 'https://www.ctnews.com.cn/wenhua/pic/2023-12/08/153787_48022e2b-7da6-46ad-9669-51e769944613.jpg',
    type: '活动'
  }
]);

// 最近收藏记录
const recentCollections = ref([
  {
    date: '2024-05-20',
    name: '清源山',
    location: '泉州市区东北'
  },
  {
    date: '2024-05-18',
    name: '南音演奏会',
    location: '泉州市文化中心'
  },
  {
    date: '2024-05-01',
    name: '开元寺',
    location: '泉州市区中心'
  }
]);

// 模块点击事件
const handleModuleClick = (module: any) => {
  console.log(`跳转至${module.title}页面`);
  // 此处可添加路由跳转逻辑
};

// 组件挂载时获取登录用户信息
onMounted(() => {
  const storedUser = localStorage.getItem('user');
  if (storedUser) {
    const loggedInUser = JSON.parse(storedUser);
    user.value.nickname = loggedInUser.nickname || '用户'; // 更新昵称
    // 如果头像也需要从localStorage获取，可以在这里更新 user.value.avatar
  }
});
</script>

<style scoped>
/* 全局样式 */
.member-center {
  font-family: 'Noto Sans CJK SC', sans-serif;
  color: #333;
  background: #f5f7fa;
  padding-top: 60px; /* 为固定导航栏预留空间，如果导航栏高度不同，请调整此值 */
}

/* 会员头部 */
.member-header {
  position: relative;
  height: 350px; /* 可以根据需要调整高度 */
  overflow: hidden;
}

.header-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* 移除 background-size 和 background-position，让 img 标签控制 */
  filter: brightness(0.7);
}

.header-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 确保图片覆盖整个背景区域 */
}

.member-profile {
  position: relative;
  z-index: 10;
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 20px; /* 调整内边距 */
  display: flex;
  align-items: center;
  gap: 30px; /* 调整间距 */
  color: white; /* 将文字颜色设为白色，以便在背景图上更清晰 */
}

.avatar-box {
  width: 150px; /* 调整头像框大小 */
  height: 150px;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 0 20px rgba(255,255,255,0.3); /* 调整阴影以适应深色背景 */
  border: 3px solid rgba(255,255,255,0.5); /* 添加白色边框 */
  position: relative; /* 确保头像在内容之上 */
}

.avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profile-info {
  flex: 1;
  /* color: white; 已移至 .member-profile */
}

.profile-info h2 {
  font-size: 2rem; /* 调整昵称大小 */
  font-weight: bold;
  margin-bottom: 8px;
}

.profile-info .member-id {
  font-size: 0.9rem;
  opacity: 0.8;
  margin-bottom: 20px;
}

.collection-info {
  margin-top: 20px; /* 调整间距 */
  display: flex;
  flex-direction: column; /* 保持纵向排列 */
  gap: 8px; /* 调整间距 */
}

.collection-count {
  font-size: 2rem; /* 调整收藏数量大小 */
  font-weight: bold;
}

.collection-count span {
  font-size: 0.8rem;
  /* color: #f0f0f0; 已继承父元素颜色 */
  display: inline-block;
  margin-left: 5px;
  opacity: 0.8;
}

.collection-desc {
  font-size: 0.9rem;
  /* color: #f0f0f0; 已继承父元素颜色 */
  opacity: 0.8;
}

/* 功能模块 */
.function-modules {
  max-width: 1200px;
  margin: 20px auto 0; /* 调整与头部的间距，移除负边距 */
  padding: 40px 20px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* 调整模块最小宽度 */
  gap: 20px; /* 调整模块间距 */
}

.module-card {
  background: white;
  border-radius: 12px; /* 调整圆角 */
  padding: 25px 20px; /* 调整内边距 */
  text-align: center;
  box-shadow: 0 8px 15px rgba(0,0,0,0.04); /* 调整阴影 */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.module-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 25px rgba(0,0,0,0.08);
}

.module-icon {
  width: 50px; /* 调整图标容器大小 */
  height: 50px;
  margin: 0 auto 15px; /* 调整与文字的间距 */
  background: #e0f3ff;
  border-radius: 8px; /* 调整圆角 */
  display: flex;
  align-items: center;
  justify-content: center;
}

.module-icon img {
  width: 30px; /* 调整图标大小 */
  height: 30px;
  fill: #004d7a;
}

.module-card h3 {
  font-size: 1.1rem; /* 调整模块标题大小 */
  color: #333;
  margin-bottom: 8px;
}

.module-card p {
  font-size: 0.85rem; /* 调整模块描述文字大小 */
  color: #666;
}

/* 我的收藏 */
.my-collections {
  max-width: 1200px;
  margin: 40px auto 60px; /* 调整外边距 */
  padding: 40px 20px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.03);
}

.my-collections h2 {
  font-size: 1.5rem; /* 调整标题大小 */
  color: #1f3c58;
  margin-bottom: 25px; /* 调整与列表的间距 */
  text-align: center;
}

.collection-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* 调整卡片最小宽度 */
  gap: 25px; /* 调整卡片间距 */
  margin-top: 0; /* 移除顶部外边距，因为标题已有 */
}

.collection-item {
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 3px 10px rgba(0,0,0,0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.collection-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 15px rgba(0,0,0,0.12);
}

.collection-image {
  height: 180px;
  overflow: hidden;
}

.collection-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.collection-item:hover .collection-image img {
  transform: scale(1.05);
}

.collection-info {
  padding: 15px;
}

.collection-info h3 {
  font-size: 1.1rem; /* 调整收藏项标题大小 */
  color: #004d7a;
  margin-bottom: 8px;
}

.collection-info p {
  font-size: 0.85rem; /* 调整收藏项描述文字大小 */
  color: #555;
  line-height: 1.5;
}

.collection-tags {
  margin-top: 10px;
}

.tag {
  display: inline-block;
  padding: 4px 8px;
  background: #e0f3ff;
  color: #0066cc;
  border-radius: 4px;
  font-size: 0.8rem;
}

/* 最近收藏 */
.recent-collections {
  max-width: 1200px;
  margin: 40px auto 80px;
  padding: 40px 20px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.03);
}

.recent-collections h2 {
  font-size: 1.5rem;
  color: #1f3c58;
  margin-bottom: 25px;
  text-align: center;
}

.record-list {
  list-style: none;
  padding: 0;
}

.record-item {
  padding: 15px 0;
  border-bottom: 1px solid #f0f0f0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: background-color 0.2s ease;
}

.record-item:last-child {
  border-bottom: none;
}

.record-item:hover {
  background-color: #f9f9f9;
}

.record-date {
  color: #666;
  font-size: 0.9rem;
  min-width: 100px; /* 确保日期有足够空间 */
}

.record-content {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-grow: 1; /* 占据剩余空间 */
}

.type-icon {
  width: 16px;
  height: 16px;
  border-radius: 3px; /* 调整圆角 */
  flex-shrink: 0; /* 防止图标被压缩 */
}

.collection {
  background: #0066cc;
}

.record-content span:not(.location):not(.type-icon) {
  font-weight: 500; /* 加粗记录名称 */
  color: #333;
}

.location {
  color: #777; /* 调整地点文字颜色 */
  font-size: 0.85rem;
  margin-left: auto; /* 将地点推到最右侧 */
  padding-left: 10px; /* 与名称的间距 */
  white-space: nowrap; /* 防止地点换行 */
}

/* 移动端适配 */
@media (max-width: 768px) {
  .member-center {
    padding-top: 50px; /* 调整移动端导航栏预留空间 */
  }

  .member-profile {
    flex-direction: column;
    text-align: center; /* 文本居中 */
    gap: 20px;
    padding: 30px 15px;
  }

  .avatar-box {
    width: 120px;
    height: 120px;
  }

  .profile-info h2 {
    font-size: 1.8rem;
  }

  .collection-info {
    align-items: center; /* 收藏信息居中 */
    gap: 15px;
  }

  .collection-count {
    font-size: 1.8rem;
  }

  .function-modules {
    grid-template-columns: 1fr;
    gap: 15px;
    padding: 30px 15px;
  }
  
  .collection-list {
    grid-template-columns: 1fr;
    gap: 15px;
  }

  .my-collections, .recent-collections {
    padding: 30px 15px;
    margin-bottom: 40px;
  }

  .my-collections h2, .recent-collections h2 {
    font-size: 1.3rem;
    margin-bottom: 20px;
  }

  .record-item {
    flex-direction: column; /* 记录项垂直排列 */
    align-items: flex-start; /* 左对齐 */
    gap: 8px;
  }

  .record-date {
    font-size: 0.85rem;
  }

  .location {
    margin-left: 0; /* 移除左外边距 */
    padding-left: 0;
  }
}

@media (max-width: 480px) {
  .member-center {
    padding-top: 40px;
  }

  .avatar-box {
    width: 100px;
    height: 100px;
  }

  .profile-info h2 {
    font-size: 1.6rem;
  }

  .collection-count {
    font-size: 1.6rem;
  }

  .module-card h3 {
    font-size: 1rem;
  }

  .module-card p {
    font-size: 0.8rem;
  }

  .collection-info h3 {
    font-size: 1rem;
  }

  .collection-info p {
    font-size: 0.8rem;
  }

  .my-collections h2, .recent-collections h2 {
    font-size: 1.2rem;
  }
}
</style>